<template>
  <div class="tree"  v-loading="loading">
    <i
      class="el-icon-caret-right"
      @click="openAndClose"
      style="color:#cbcbcb;font-size:35px;margin-top: 5px;cursor: pointer;"
    ></i>
    <!-- 弹窗表格组件 父元素加display:flex;-->
    <!-- {{penetrateId}} -->
    <div class="main">
      <div style="padding:10px;width:300px">
        <addComponent
        :diaDataAdd="dictionaries"
         @toAdd="toAdd"
        ></addComponent>
      </div>
      <el-table
     
      element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
        style="background:#F0F4FA"
        :data="right_data_table"
        border
        size="mini"
        highlight-current-row
        @current-change="leftCurrentChange"
      >
        <!-- <el-table-column prop="id" label="编号" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="typeCode" label="类型编码" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="typeName" label="类型名称" :show-overflow-tooltip="false"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <modificationi
              class="inline_block"
              :attributeOrder="dictionaries"
              :modData="scope.row"
              @modifyData="modifyData"
            ></modificationi>

            <el-button
              style="color:#C90010;border:none;"
              icon="el-icon-delete"
              circle
              @click.stop="handleDelete(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹窗 -->
  </div>
</template>
<script>
import addComponent from "@/views/components/FLPage/addComponent";
//引入修改组件
import modificationi from "@/views/components/FLPage/modificationi";
import {
  putTSType,
  getFindRight,
  deleteList,
  rightGet,
  addList
} from "@/api/TenantRoleManagement";
export default {
  components: {
    modificationi,
    addComponent
  },
  //rightHurdleData
  props: {
    rightHurdleData: Array,
    penetrateId:String,
  },
  data() {
    return {
       loading: true,
      //
      //编辑弹窗
      alterDia: {
        id: "",
        typeCode: "",
        typeName: "",
        typeGroupId: "",
        createDate: ""
      },
      dictionaries: [
        {
          EN: "id",
          CN: "编号",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: false
        },
        {
          EN: "typeCode",
          CN: "类型编码",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        },
        {
          EN: "typeName",
          CN: "类型名称",
          value: "",
          type: "input",
          option: [],
          typeFrom: "string",
          Exp: "",
          err: "",
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true
        }
      ],
      right_data_table: [
        {
          id: 1,
          type: "类型名称1",
          code: "类型编码1"
        }
      ],
      defaultProps: {
        children: "child",
        label: "name"
      }
    };
  },
  watch: {
    rightHurdleData: {
      deep: true,
      handler(newval, oldval) {
        console.log("新值");
        console.log(newval);
         this.loading=true
        this.right_data_table = newval;
        this.loading=false
      }
    }
  },

  methods: {
    toAdd(val){
      console.log('toadd')
      console.log(val)
      let obj={}
      for(let i=0;i<val.length;i++){
        obj[val[i].EN]=val[i].value
      }
      obj['typeGroupId']=this.penetrateId
      // console.log(this.penetrateId)
      delete obj['id']
      console.log(obj)
      addList(obj).then(response=>{
         getFindRight(this.penetrateId).then(response => {
          this.right_data_table = response.data;
        });
        this.$message({
            message: response.message,
            type: "success"
          });
      })
    },
    //修改
    modifyData(value, MDData) {
      console.log(value, MDData);
      putTSType(MDData.id, MDData).then(Response => {
        console.log(Response);
        //更新右侧表格
        getFindRight(MDData.typeGroupId).then(response => {
          this.$message({
            message: response.message,
            type: "success"
          });
          this.right_data_table = response.data;
        });
      });
    },
    //单选
    leftCurrentChange(val) {
      //  console.log(val)
      this.$emit("choiceReturn", val);
    },
    //删除
    handleDelete(row) {
      console.log("删除");
      // this.$emit("forDeleteData", row);
      this.$confirm("确认关闭？")
        .then(_ => {
          console.log(row);
          deleteList(row.id).then(response => {
            getFindRight(row.typeGroupId).then(response => {
              this.right_data_table = response.data;
            });
          });
          done();
        })
        .catch(_ => {});
    },
    //开关组件
    openAndClose() {
      this.$emit("rightSwitch", false);
    },
    //编辑
    handleUpdate(row) {
      console.log(row);
      this.dialogVisible = true;
    },
    //
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //
    addTY(){
      
    }
  }
};
</script>
<style lang="scss" src="../../../styles/triangle.scss" scoped></style>
